$(function () {
    // alert(123)
    // 1.添加分类
    $('#addCategory').on('submit', function (e) {
        // alert(123)
        e.preventDefault();
        var formData = $(this).serialize();
        // 向服务器端发送请求 添加分类
        $.ajax({
            type: 'post',
            url: 'http://localhost:3000/categories',
            data: formData,
            success: function (res) {
                console.log(res);
                location.reload();
            }
        })
    })

    // 页面数据自动加载   
    $.ajax({
        method: 'get',
        url: 'http://localhost:3000/categories',
        success: function (res) {
            console.log(res);
            //渲染数据
            var html = template('categoryListTpl', {
                data: res
            });
            $('#categoryBox').html(html)
        }
    })

    // 删除分类
    $('#categoryBox').on('click', '.delete', function () {
        if (confirm('您真的要执行删除操作吗')) {
            var id = $(this).attr('data-id');
            $.ajax({
                method: 'delete',
                url: 'http://localhost:3000/categories/' + id,
                success: function () {
                    location.reload();
                }
            })
        }
    })

    // 点击编辑分类信息
    $('#categoryBox').on('click', '.edit', function () {
        var id = $(this).attr('data-id');
        $.ajax({
            method: 'get',
            url: 'http://localhost:3000/categories/' + id,
            success: function (res) {
                console.log(res);
                var html = template('modifyCategoryTpl', res);
                $('#formBox').html(html);
            }
        })
    })
    // 点击修改按钮进行提交

    $('#formBox').on('submit', '#modifyCategory', function (e) {
        // alert(123);
        e.preventDefault();
        var formData = $(this).serialize();
        var id = $(this).attr('data-id');
        $.ajax({
            type: 'put',
            url: 'http://localhost:3000/categories/' + id,
            data: formData,
            success: function () {
                location.reload();
            }
        })
    })
})